<template>
  <div>

      <div>
          <div v-for="(color,index) in colors" :key="index" class="item">
              <span>{{index+1}}</span>
              <input type="checkbox" v-model="checkboxs[index]">
              <span>{{color}}</span>
          </div>
          <div>选择的结果:{{result}}</div>
      </div>

      <myheader title="你好" age="30"></myheader>
       <myheader title="我好" age="30"></myheader>
       <myheader title="都好" age="10"></myheader>
      <div>
          <input type="text" v-model="car_sn">
          <input type="button" value="查询" @click="search">
          <input type="button" value="停车次数大于3次" @click="search3">
      </div>
      <table border="1">
          <tr>
              <th>车牌号</th>
              <th>停车日期</th>
          </tr>
          <tr v-for="item in search_list" :key="item.id">
              <td>{{item.car_sn}}</td>
              <td>{{item.start}}</td>
          </tr>
      </table>
  </div>
</template>

<script>

import Header from '@/components/Header'

export default {
    components:{
       myheader:Header 
    },
    data(){
        return {
            car_sn:"",
            search_list:[],
            colors:["红色","橙色","黄色","绿色","青色","蓝色","紫色"],
            checkboxs:[],
        }
    },methods:{
        search(){
            this.axios.get("/record?car_sn="+this.car_sn).then(resp=>{
                console.log(resp.data)
                this.search_list=resp.data
            }).catch(error=>{
                console.log(error)
            })
        },
        search3(){

        }
    },created(){
        console.log(this.$route)
        for(let i=0;i<this.colors.length;i++){
            this.checkboxs.push(false)
        }
    },
    computed:{
        result(){
            console.log("++++++++++++++")
            let s=""
            for(let i=0;i<this.checkboxs.length;i++){
                if(this.checkboxs[i]){
                    s+=this.colors[i]+"--"
                }
            }
            return s
        }
    }
}
</script>

<style>

.item{
    width:200px;
    height:30px;
    border: 1px solid gainsboro;
    margin: 20px auto;
}

</style>